<template>
	<view class="content">
		<nav-bar :left="left"></nav-bar>
		<view class="top-title">
			<image src="@/assets/login/loginIcon.png" class="imgIcon"></image>
			<view class="welcome">
				{{ $t('歡迎您來到流量方舟') }}
			</view>
			<view class="text">
				{{ $t('請輸入郵箱號或手機號，密碼進行注冊') }}
			</view>
		</view>
		<view class="from">
			<h-input v-if="cutNum" :name="$t('郵箱號')" @myInp="changeEmail">
				<template v-slot:right>
					<view @click="changeCutNum(false)" style="color:#636897 ; float: right;font-size: 26rpx;" class="cut">
						{{ $t('切換手機號') }}
					</view>
				</template>
			</h-input>
			<h-input v-else iptType="number" :name="$t('手機號')" @myInp="changePhone">
				<template v-slot:right>
					<view @click="changeCutNum(true)" style="color:#636897 ; float: right;font-size: 26rpx;" class="cut">
						{{ $t('切換郵箱號') }}
					</view>
				</template>
			</h-input>
			<h-input :name="$t('驗證碼')" @myInp="changeAuthCode">
				<template v-slot:right>
					<view @click="debounceGetAuthCode" v-if="isGetCode" class="codeText">{{ $t('獲取驗證碼') }}
					</view>
					<view v-else class="codeText">{{ countDownNum }}</view>
				</template>
			</h-input>
			<h-input :iptType='isShow' :name="$t('密碼')" @myInp="changePassWord">
				<template v-slot:right>
					<image @click="cutType('password')" v-if="isShow === 'text'" src="../../assets/login/zy.png"
						class="inpIcon">
					</image>
					<image @click="cutType('text')" v-else src="@/assets/myFlow/biyan.png" class="inpIcon"></image>
				</template>
			</h-input>
			<h-input :iptType='isShow' :name="$t('確認密碼')" @myInp="changeagainPassWord">
				<template v-slot:right>
					<image @click="cutType('password')" v-if="isShow === 'text'" src="../../assets/login/zy.png"
						class="inpIcon">
					</image>
					<image @click="cutType('text')" v-else src="@/assets/myFlow/biyan.png" class="inpIcon"></image>
				</template>
			</h-input>
			<view>
				<h-input :name="$t('邀請碼')" @myInp="changeInviteCode">
					<!-- <template v-slot:right>
					
				</template> -->
				</h-input>
				<!-- <image src="../../assets/myCirculation/sm.png" class="inpIcon" ></image> -->
			</view>
		</view>
		<view class="goLogin" @click="jumpLogin">
			{{ $t('已有賬號，去登錄') }}
		</view>
		<view class="btn-sub" @click="onClick">
			{{ $t('注冊') }}
		</view>
	</view>
</template>

<script setup>
import HInput from '@/components/h-input.vue'
import {
	jump
} from '@/utils/common.js'
import {
	ShowToast,
	debounce
} from '@/utils/check.js'
import loginRequest from '@/hooks/login.js'
import i18n from '@/locale/index'
const {
	getVerificationCode,
	userRegister,
	getPhoneCode
} = loginRequest()
import {
	ref,
	watch
} from "vue";
 //是否已经获取验证码
let email = ref('') //邮箱
const phone = ref('') //手机号
let authCode = ref('') //验证码
let passWord = ref('') //密码
let againpassWord = ref('') //确认密码
let inviteCode = ref('') //邀请码
let isGetCode = ref(true)
let countDownNum = ref(0) //倒计时数字
const cutNum = ref(true)
let isShow = ref('password')

watch(email, (now, old) => {
})
const jumpLogin = () => {
	uni.navigateTo({
		url: "/pages/login/login",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const onClick = async () => {
	if (cutNum.value) {
		if (!email.value || !authCode.value || !passWord.value || !inviteCode.value) {
			return uni.showToast({
				title: `${i18n.global.t('請完善信息')}`,
				icon: 'none',
			})
		}
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

		function endsWithEmail(str) {
			return emailRegex.test(str);
		}
		if (!endsWithEmail(email.value)) return ShowToast(`${i18n.global.t('請輸入正確的郵箱格式!')}`)
	} else {
		if (!phone.value || !authCode.value || !passWord.value || !inviteCode.value) {
			return uni.showToast({
				title: `${i18n.global.t('請完善信息')}`,
				icon: 'none',
			})
		}
	}

	if (passWord.value !== againpassWord.value) return ShowToast(`${i18n.global.t('密碼不一致')}`)

	await userRegister('user/registerUserInfo', {
		mailbox: email.value,
		password: passWord.value,
		code: inviteCode.value,
		verifyCode: authCode.value,
		phone: phone.value,
		registrationType: cutNum.value ? 0 : 1
	})
	uni.showToast({
		title: `${i18n.global.t('注冊成功！')}`,
		icon: 'none',
	})
	uni.redirectTo({
		url: '/pages/login/login'
	})

}

const changeEmail = (val) => {
	email.value = val
}
//手机号
function changePhone(val) {
	phone.value = val
}
const changeAuthCode = (val) => {
	authCode.value = val
}
const changePassWord = (val) => {
	passWord.value = val
}
const changeInviteCode = (val) => {
	inviteCode.value = val
}
const changeagainPassWord = (val) => {
	againpassWord.value = val
}
// 获取验证码 
let a = true
const debounceGetAuthCode = async () => {
	
	// 在此处编写原始的getAuthCode方法的代码
	if (cutNum.value) {
		// 邮箱验证逻辑
		if (!email.value) {
			return uni.showToast({
				title: `${i18n.global.t('請填寫郵箱')}`,
				icon: 'none',
			});
		}
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

		function endsWithEmail(str) {
			return emailRegex.test(str);
		}

		if (!endsWithEmail(email.value)) return ShowToast(`${i18n.global.t('請輸入正確的郵箱格式!')}`);
	} else {
		// 手机号验证逻辑
		if (!phone.value) {
			return uni.showToast({
				title: `${i18n.global.t('請填寫手機號')}`,
				icon: 'none',
			});
		}
	}
	if (a) {	
		a = false
		isGetCode.value = false;
		countDownNum.value = 60;
		let timer = setInterval(() => {
			countDownNum.value--;
			if (countDownNum.value === 0) {
				clearInterval(timer);
				isGetCode.value = true;
			}
		}, 1000);			
		if (cutNum.value) {
			setTimeout(() => {
				a = true
			}, 5000)
			const res = await getVerificationCode('user/sendVerificationCode', {
				email: email.value,
				checksType: 1
			});
		} else {
			setTimeout(() => {
				a = true
			}, 5000)
			await getPhoneCode('user/sendPhoneVerificationCode', {
				phone: phone.value,
				checksType: 1
			});
		}
		uni.showToast({
			title: `${i18n.global.t('發送成功')}`,
			icon: 'none',
		});
	}

};

//修改input密码状态
function cutType(val) {
	isShow.value = val
}

function changeCutNum(val) {
	cutNum.value = val
	email.value = ''
	phone.value = ''
}
</script>

<style lang="scss" scoped>
.codeText {
	width: 150rpx;
	height: 27rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #636897;
	line-height: 27rpx;
	text-align: right;
}

.content {
	margin: 0 55rpx;
}

.inpIcon {
	width: 30rpx;
	height: 22rpx;
}

.top-title {
	width: 100%;
	margin-top: 100rpx;

	.imgIcon {
		width: 210rpx;
		height: 140rpx;
	}

	.welcome {
		font-size: 42rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 42rpx;
		margin-top: 27rpx;
	}

	.text {
		font-size: 24rpx;
		margin-top: 21rpx;
		font-family: PingFang SC;
		font-weight: 300;
		line-height: 24rpx;
		// background: linear-gradient(to right, #7B65FF 0%, #FF78A8 50%);
		background-color: #848686;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.from {
	width: 100%;
	padding-top: 38rpx;
}

.goLogin {
	width: 100%;
	text-align: right;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 24rpx;
	margin: 30rpx 0;
}

.btn-sub {
	width: 640rpx;
	height: 90rpx;
	// background: linear-gradient(90deg, #5641DD, #B1A6FD);
	background: linear-gradient(90deg, #039BDA, #0DF2ED);
	border-radius: 45rpx;
	text-align: center;
	line-height: 90rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	margin-bottom: 30rpx;
}
</style>